<!--  -->
<template>
  <div class="">
    <el-form
      :label-position="labelPosition"
      label-width="120px"
      :model="userInfo"
    >
      <el-form-item label="姓名">
        <el-input v-model="userInfo.nick" disabled></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="userInfo.age" disabled></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="userInfo.gender" disabled></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-input v-model="userInfo.role" disabled></el-input>
      </el-form-item>
      <el-form-item label="身份证号码">
        <el-input v-model="userInfo.identifier" :disabled="par1">
          <!-- <template #suffix>
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="cancelDis(1,par1)"
            ></el-button>
          </template> -->
        </el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="userInfo.phone" :disabled="par2">
          <template #suffix>
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="cancelDis(2,par2)"
            ></el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="userInfo.password" type="password" :disabled="par3">
          <template #suffix>
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="cancelDis(3,par3)"
            ></el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="家庭住址">
        <el-input v-model="userInfo.address" :disabled="par4">
          <!-- <template #suffix>
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="cancelDis(4,par4)"
            ></el-button>
          </template> -->
        </el-input>
      </el-form-item>
      <el-form-item label="年假时间">
        <el-input v-model="userInfo.yeardays" disabled></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
    
    <script>
export default {
  components: {},
  data() {
    return {
      labelPosition: "left",
      userInfo: {
        nick: "张三",
        age: 22,
        gender: "男",
        role: "士官一",
        identifier: 610121199909220000,
        phone: 17729500752,
        password: 123456,
        address: "陕西省西安市长安区",
        yeardays: 48,
      },
      par1: true,
      par2: true,
      par3: true,
      par4: true,
    };
  },
  computed: {},
  watch: {
    // userInfo:{
    //   handler(newVal,oldVal){
    //     console.log(newVal,oldVal)
    //   },
    //   deep:true,
    // }
  },
  methods: {
    cancelDis(p, par) {
      console.log(p, par);
      switch (p) {
        case 1:
          this.par1 = !par;
          break;
        case 2:
          this.par2 = !par;
          break;
        case 3:
          this.par3 = !par;
          break;
        case 4:
          this.par4 = !par;
          break;
      }
      // 调取修改用户信息接口
    },
  },
  created() {},
  mounted() {
    let a = JSON.parse(localStorage.getItem('userInfo'))
    // console.log(JSON.parse(localStorage.getItem('userInfo')))
    this.userInfo.nick= a.nick
    this.userInfo.password = a.password
    this.userInfo.phone = a.phone
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
    <style  scoped>
</style>